import { Col, Form, Input, Modal, Row } from 'antd';
import React, { Component } from 'react';
import { isEmpty, isFunction } from 'lodash';
import { connect } from 'dva';
import { createDetail, createForm } from '/common/components/HocCRUD';
import { modelName } from '../config';
import ModalItem from '/common/components/ModalItem';


@Form.create()
@createForm()
class DetailForm extends Component {

  getAjaxData() {
    const { compData = {} } = this.props;
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll(async (errors, fieldsValue) => {
        if (isEmpty(errors)) {
          const values = {
            ...fieldsValue
          };
          compData.id > 0 && (values.id = compData.id);
          resolve(values);
        } else {
          reject(errors);
        }
      });
    });
  }

  render() {
    const {compData} = this.props;
    const formFields = [
      {
        label: '职务编码',
        fieldName: 'code',
        options: {
          initialValue: compData.code,
          rules: [{
            required: true,
            message: '请输入编码',
          }],
        },
        comp: <Input/>,
      },
      {
        label: '职务名称',
        fieldName: 'name',
        options: {
          initialValue: compData.name,
          rules: [{
            required: true,
            message: '请输入职务名称',
          }],
        },
        comp: <Input/>,
      },
    ];

    return (
      <Form layout="horizontal">
        <Row gutter={16}>
          {this.props.getFields(formFields)}
        </Row>
      </Form>
    );
  }
}

@connect((state) => {
  const { loading } = state;
  const model = state[modelName] || {};
  const { detail, isShowDetail} = model;
  return {
    loading,
    detail,
    isShowDetail,
  };
})
@createDetail({ modelName })
class EmployeeClassifyDetail extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.itemRef = React.createRef();
  }

  async handleOk() {
    // console.log('this.itemRef', this.itemRef);
    const {
      saveDetail
    } = this.props;
    const itemRef = this.itemRef.current;

    if (itemRef && isFunction(itemRef.getAjaxData)) {
      try {
        const values = await itemRef.getAjaxData();
        console.info('get ajaxData values', values);
        Modal.confirm({
          title: '确认保存信息吗?',
          centered: true,
          onOk() {
            saveDetail(values);
          }
        });
      } catch (e) {
        // console.log(e);
      }

    } else {
      console.error('EmployeeClassifyDetail Have not getAjaxData function');
    }
  };

  handleCancel(e) {
    this.props.hideDetail();
  }

  render() {
    const { match, id, loading } = this.props;
    const isEdit = (match && match.params.id > 0) || id > 0;
    return (
      <ModalItem
        width={520}
        title={`${isEdit > 0 ? '编辑' : '新建'}职务`}
        visible={this.props.isShowDetail}
        loading={!!loading.models[modelName]}
        onOk={this.handleOk.bind(this)}
        onCancel={this.handleCancel.bind(this)}
      >
        <DetailForm compData={this.props.detail}
                    wrappedComponentRef={this.itemRef}/>
      </ModalItem>
    );
  }
}

EmployeeClassifyDetail.propTypes = {};

export default EmployeeClassifyDetail;
